<template>
  <div>
    <div v-if="!authPass" class="password-panel">
      <el-input
        type="password"
        placeholder="请输入密码"
        v-model="password"
        autocomplete="off"
      />
      <el-button type="primary" @click="confirmPassword">提交</el-button>
    </div>
    <div v-else class="main-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus'; // 假设你使用的是 Element Plus UI 库

const props = defineProps({
  authPassword: {
    type: String,
    required: true,
    default: 'ZhaoChunNan666'
  }
});
const password = ref('');
const authPass = ref(false);

const confirmPassword = () => {
  if (password.value == props.authPassword) { // 替换为你的正确密码或验证逻辑
    authPass.value = true;
  } else {
    ElMessage.error('密码错误，请重试');
  }
  password.value = ''; // 清空密码框
};

onActivated(() => {
  password.value = ''
  authPass.value = false
})
</script>

<style scoped>
.password-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 可根据需要调整 */
}

.password-panel .el-input,
.password-panel .el-button {
  margin: 10px 0; /* 可根据需要调整间距 */
  width: fit-content; /* 使输入框和按钮宽度适应其内容 */
}

.main-content {
  padding: 20px; /* 可根据需要调整内边距 */
}
</style>
